<template>
    <a-form   @finish="handleFinish" :model="form" ref="formRef" name="basic" :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }" autocomplete="off">
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="项目编号" name="proCode" :rules="[{ required: true }]" >
                    <a-input-search v-model:value="form.proCode" :disabled="disabled" style="width: 100%" placeholder="清选择项目"
                        @search="onSearch" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="项目名称" name="proName" >
                    <a-input v-model:value="form.proName" disabled style="width: 100%" placeholder="请输入项目名称" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="签证事项" name="item" :rules="[{ required: true }]" >
                    <a-input v-model:value="form.item"  :disabled="disabled"  style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
            <a-col :span="12">
                <a-form-item label="金额" name="amount" :rules="[{ required: true }]" >
                    <a-input v-model:value="form.amount"  :disabled="disabled"  style="width: 100%" placeholder="" />
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="12">
                <a-form-item label="附件" name="files">
                    <fileUpload @uploadDone="uploadDone"  :isShow="disabled"  :files="form.files" ref="uploadRef" :uploadNumber="4">
                    </fileUpload>
                </a-form-item>
            </a-col>
        </a-row>
        <a-row :gutter="16">
            <a-col :span="24">
                <a-form-item :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }" label="签证内容" name="content">
                    <a-textarea v-model:value="form.content"  :isShow="disabled"  :rows="4" placeholder="" style="width: 100%" />
                </a-form-item>
            </a-col>
        </a-row>

        <!-- <a-form-item :wrapper-col="{ span: 14, offset: 4 }">
                <a-button type="primary" html-type="submit">保存</a-button>
                <a-button style="margin-left: 10px" @click="onClose">取消</a-button>
            </a-form-item> -->
    </a-form>
    <projectSelection ref="proSelect" @onClose="prSelectOk"  />

</template>
<script setup>
import projectSelection from '@/components/pm/projectSelection.vue'
import fileUpload from '@/components/JqUpload/index.vue'
import api from '@/api/pm/cost/visa'
const formRef =ref()
const props = defineProps({
    value: {
        type: Object,
        default: () => { }
    },
    disabled: {
        type: Boolean,
        default: () => false
    }
})

const uploadDone = (result) => {
    console.log("uploadDone", result)
    form.value.files = result
}
const form = ref({
});


const handleFinish = (values) => {

    if (!form.value.id) {
        api.add(values).then(() => {
            onClose(true);
        })
    } else {
        values.id = form.value.id;
        api.edit(values).then(() => {
            onClose(true);
        })
    }
};
const proSelect = ref()
const onSearch = () => {
    proSelect.value.show()
}
const prSelectOk = (selectedRowKeys, selectRecords) => {
    console.log("prSelectOk", selectedRowKeys, selectRecords)
    form.value.proId = selectRecords[0].id;
    form.value.proName = selectRecords[0].name;

    form.value.proCode = selectRecords[0].code;
    
}


const emits = defineEmits(['onClose'])
const onClose = (flag) => {
    emits('onClose', flag)
};
const show = (record) => {
    if (record) {
        form.value = { ...record }
    } else {
        form.value = {
        }
    }
}

watch(
    () => props.value,
    (newVal, oldVal) => {
        if (newVal) {
            form.value = { ...newVal }
        }
    },
    { deep: true, immediate: true }
)
// 重置
const resetForm = () => {
    formRef.value.resetFields()
}

const getData = () => {
    return new Promise((resolve, reject) => {
        formRef.value.validate().then(() => {
            resolve(form.value)
        }).catch((err) => {
            reject(err)
        });
    })
}
const submit = () => {
    formRef.value.validate().then(() => {
        handleFinish(form.value)
    })

}
defineExpose({
    submit,
    getData,
    resetForm,
    show
})
</script>